<template>
  <div class="meng-editor-image-box">
    <ul class="meng-editor-image-box-tabs">
        <li v-for="(item,index) in tabs" 
            :key="index"
            :class="{selected: selectedIndex === index}"
            @click="selectTab(index,item.component)">
            {{item.title}}
        </li>
    </ul>
    <component :is="currentComponent" 
            :range="range" 
            :uploadMethod="uploadMethod"
            :uploadResponse="uploadResponse"
            ref="childComponent"
            :currentSelection="currentSelection"
            @selectMenu="selectMenu"
            ></component>
  </div>
</template>

<script>
import base64Image from './Base64Image'
import onlineImage from './onlineImage'
import serverImage from './ServerImage';
export default {
    name: 'image-box',
    props: ['range','uploadMethod','uploadResponse','currentSelection'],
    components:{base64Image,onlineImage,serverImage},
    data(){
        return {
            tabs: [
                {title:'本地图片',component:'base64Image'},
                {title:'网络图片',component:'onlineImage'},
                {title:'上传图片',component: 'serverImage'},
            ],
            selectedIndex: 0,
            currentComponent:'base64Image'
        }
    },
    methods:{
        selectMenu() {
            console.log('img box', this.$parent)
            this.$parent.selectMenu()
        },
        selectTab (index,component) {
            this.selectedIndex = index
            this.currentComponent = component
            console.log('rage', this.range)
            this.$nextTick(()=>{
                if (component === 'serverImage') {
                    let childComponent = this.$refs['childComponent']
                    console.log('children',childComponent)
                    childComponent.getRange(this.range)
                }
            })
        },
        handleClose(){
            this.$parent.handleClose()
        }
    },
}
</script>

<style scoped>
.meng-editor-image-box {
    width: 300px;
    min-height: 100px;
    background: white;
    margin-left: -80px;
    border: 1px solid lightgray;
}
.meng-editor-image-box-tabs {
  display: flex;
  flex-direction: row;  
  border-bottom: 1px solid lightgray;
}
.meng-editor-image-box-tabs > li {
    flex:1;
    font-size: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 30px;
}
.selected {
    border-bottom: 1px solid red;
}
</style>